<template>
  <img :src="src || defaultImg[defaultImgType] || defaultImg.people" :style="imgStyles" @click="onClick" />
</template>

<script>
import { viewImages } from './viewer.js';
import { encryptRoute } from '../encrypt-route/index.js';

import icon_people from './assets/nor_pic_head.png';
import icon_other from './assets/nor_pic_image.png';

export default {
  name: 'ImgViewer',
  props: {
    src: { default: undefined },
    defaultImgType: { type: String, default: 'people' },
    preview: { type: Boolean, default: true },
    encryptConfirmed: { type: Boolean, default: true }, //照片模糊，是否需要验证
  },
  data() {
    return {
      defaultImg: {
        people: icon_people,
        other: icon_other,
      },
    };
  },
  computed: {
    imgStyles() {
      const filter = `blur(${this.encryptConfirmed && this.src ? '3px' : '0px'})`;
      return {
        objectPosition: 'center',
        objectFit: 'cover',
        cursor: this.preview === true ? 'pointer' : 'default',
        '-webkit-filter': filter,
        filter: filter,
      };
    },
  },
  methods: {
    async onClick() {
      if (this.preview) {
        if (!this.src) return false;
        if (this.encryptConfirmed) {
          const res = await encryptRoute();
          if (res) {
            viewImages(this.src);
          }
        } else {
          viewImages(this.src);
        }
      }
    },
  },
};
</script>

<style lang="less"></style>
